<!-- 水压运行数据 -->
<template>
  <div id="maind">
    <a-space direction="vertical" :size="16" style="display: block">
      <a-row class="grid-demo">
        <a-col :span="3">
          <div>
            <a-input-search
              style="margin-bottom: 8px; max-width: 240px"
              v-model="searchKey"
            />
            <!-- 树 -->
            <a-tree
              @select="selected"
              :data="run.citys"
              :fieldNames="{
                key: 'addressId',
                title: 'address',
                children: 'children',
              }"
            />
          </div>
        </a-col>
        <a-col :span="18">
          <div id="maind">
            <div>
              日期:<a-range-picker
                style="width: 360px; margin-right: 24px; margin-bottom: 10px"
              />
            </div>
            <div>
              <a-tabs default-active-key="2" style="padding-left: 60px">
                <a-tab-pane key="1" title="曲线">
                  <div v-if="run.bool">
                    <runEcharts></runEcharts>
                  </div>
                  <div v-else>
                    <a-empty />
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" title="表格">
                  <div v-if="run.bool">
                    <runList></runList>
                  </div>
                  <div v-else>
                    <a-empty />
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>
<script setup lang="ts">
import runEcharts from "./pressure/runEcharts.vue";
import { useRuning } from "../../store/running";
import runList from "./pressure/runList.vue";
import { ref } from "vue";
const searchKey = ref("");
const run = useRuning();
// 获取地区信息
run.addressInfo();
let citydata = run.citys;
console.log(run.citys);
// 点击地区触发事件
let selected = (key: any) => {
  console.log(key);
  run.runAllAction(key);
};
</script>

<style scoped>
#maind {
  height: 100%;
  margin-top: 70px;
}
.arco-layout-header {
  height: 50px;
}
.arco-layout-content {
  justify-content: none;
}
</style>
